<template>
  <div class="page">
    <el-form
      class="login-form"
      ref="form"
      label-width="100"
      :model="model"
      :rules="rules"
    >
      <el-form-item label="登录用户：" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>
      <el-form-item label="登录密码：" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>
      <el-form-item label="登录验证：" class="captcha" prop="verifyCode">
        <el-input
          class="captcha__input"
          v-model="model.verifyCode"
          @keyup.enter="handleLogin"
        />
        <Captcha ref="captcha"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleLogin" class="enter">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
  import { ElMessage } from "element-plus";
  import Captcha from "./components/captcha.vue";
  
  export default {
    name: "login",
  
    components: {
      Captcha,
    },
  
    data() {
      return {
        // 是否正在登录中
        loading: false,
        // 表单数据
        model: {
          // 用户名
          username: "admin",
          // 密码
          password: "123456",
          // 验证码
          verifyCode: "",
        },
        // 表单规则
        rules: {
          username: [{ required: true, message: "请输入" }],
          password: [
            { required: true, message: "请输入" },
            { min: 6, message: "最少6位" },
          ],
          verifyCode: [{ required: true, message: "请输入" }],
        },
      };
    },
  
    methods: {
      async handleLogin() {
        await this.$refs.form.validate();
        // 表单校验成功
        // 组装登录接口需要的参数
        const params = {
          ...this.model,
          // 获取 captchaId 通过 ref 绑定 captcha 组件
          captchaId: this.$refs.captcha.captchaId,
        };
  
        try {
          // 防重点击
          this.loading = true;
          // 派发 user/login 动作
          const data = await this.$store.dispatch("user/login", params);
          // 派发 user/getPerson 动作
          //    移动到全局前置守卫中去
          // 
          // Success
          ElMessage({
            type: "success",
            message: "登录成功",
            duration: 1000,
            onClose: () => {
              // 消息关闭时的回调函数
              // 跳转页面
              const redirect = this.$route.query.redirect || "/";
              this.loading = false;
              this.$router.replace(redirect);
            },
          });
        } catch (error) {
          // 登录错误处理
          this.loading = false;
          // 1. 清空验证码输入框
          this.model.verifyCode = "";
          // 2. 验证码刷新
          this.$refs.captcha.refresh();
        }
      },
    },
  };
  </script>
<style scoped lang="scss">

.page{
    height:100%;
	background: linear-gradient(#FFC0CB, #FFA07A);
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-form {
    padding: 16px;
    box-sizing: border-box;
    width: 360px;
    border-radius: 5px;
    box-shadow: 0 0 10px palegreen;
    background-color: #fff;
}

.captcha {
    ::v-deep(.el-form-item__content) {
        justify-content: space-between;
    }
    &__input {
        width: 70px;
    }
}
.enter{
  width: 136px;
  height: 30px;
}

</style>